<template>
  <div class="html">
    <!--头部-->
      <project-header-top></project-header-top>
    <!--头部下面的following部分-->
    <div class="following">
      <span class="block">Following</span>
      <span class="block">Follow creators and Facebook friends and we’ll notify you whenever they launch or back a new project.<a> Learn more.</a></span>
    </div>
    <!--导航栏部分-->
    <div class="menu">
      <ul class="menu-classify">
        <li>Find Facebook friends</li>
        <li>Find creators</li>
        <li><span></span></li>
        <li>Following<span>{{num}}</span></li>
        <li>Followers<span>{{num}}</span></li>
        <li>Blocked</li>
      </ul>
      <!--<span></span>-->
      <!--推荐好友-->
      <ul class="menu-people">
        <li v-for="(item,key) in follows" :key="key">
          <span class="headPortrait lineBlock"></span>
          <span class="people-info lineBlock">
            <span class="people-name block">{{item.name}}</span>
            <span class="people-num block">{{item.peopleNum}}</span>
          </span>
          <input type="button" value="Following ✓" class="flollowBtn lineBlock"/>
        </li>
      </ul>
    </div>
    <setting-footer-top></setting-footer-top>
    <!--脚部-->
    <div class="footer">
      <div class="footerOne">
        <span class="footer-title">Following</span>
        <span class="footer-num lineBlock">1</span>
      </div>
      <div class="footerTwo">
        <span class="footer-title">Total projects backed</span>
        <span class="footer-num lineBlock">2</span>
      </div>
    </div>
  </div>
</template>

<script>
  import settingFooterTop from '../publicCom/SettingFooterTop'
  import projectHeaderTop from '../publicCom/ProjectHeaderTop'

    export default {
        name: "setting-f-ollowing",
        components:{ settingFooterTop, projectHeaderTop },
        data(){
            return{
              num:1,
              greenColor:[ true, true, true],
              follows:[
                { name:'Jake Smith', peopleNum:'2 Backed' },
                { name:'Alan Rivera', peopleNum:'2 Backed' },
                { name:'Kathleen Cruz', peopleNum:'2 Backed' },
              ],
            }
        },
    }
</script>

<style scoped lang="scss">
  /*公共样式*/
  .block{display: block}
  .lineBlock{display: inline-block}
  .floatLeft{float: left}
  input{outline: none}
  /*头部下面的following部分*/
  .following{
    height:258px;
    background: #F8F9FD;
    box-shadow: 0 1px 0 0 #DBDEDD;
    width: 100vw;
    padding-left: 201px;
    box-sizing: border-box;
    font-family: PingFangSC-Regular;
    span:nth-child(1){
      margin: 1px 0 14px 0;
      padding-top: 58px;
      box-sizing: border-box;
      line-height: 67px;
      font-size: 48px;
      color: #000000;
      letter-spacing: 0.5px;
    }
    span:nth-child(2){
      font-size: 14px;
      color: #2E2E2E;
      letter-spacing: 0.8px;
      line-height: 24px;
      width:549px;
      a{color:#2C59F6 }
    }
  }
  /*导航栏部分*/
  .menu{
    width: 100vw;
    padding-bottom: 104px;
    box-shadow: 0 2px 0 0 #DDDDDD;
    .menu-classify{
      line-height: 83px;
      background: #FFFFFF;
      box-shadow: 0 1px 0 0 #DBDEDD;
      padding-left: 200px;
      font-size: 14px;
      box-sizing: border-box;
      font-family: PingFangSC-Semibold;
      li{
        display: inline-block;
        margin-right: 43px;
        color: #2E2E2E;
        letter-spacing: -0.3px;
      }
      span{
        display: inline-block;
        width:16px;
        line-height: 19px;
        text-align: center;
        background: #3D3E63;
        color: #FFFFFF;
        letter-spacing: -0.3px;
        margin:0 43px 0 13px;
      }
      i:nth-child(3){margin:0 53px 0 63px;}
      li:nth-child(3) span{
        display: inline-block;
        height: 29px;
        width: 2px;
        background-color: #DDDDDD;;
        vertical-align: middle;
      }
    }
  }
  .menu-people{
    margin-top: 39px;
    margin-left: 200px;
    span{
      vertical-align: middle;
      span{display: block}
    }
    li{
      line-height: 120px;
      width: 1040px;
      background: #FFFFFF;
      box-shadow: 0 1px 0 0 #DDDDDD;
      margin-top: 2px;
      list-style: none;
      font-family: PingFangSC-Semibold;
      font-size: 16px;
      letter-spacing: -1px;
      color:#317260;
      input:active{
        background: #317260;
        color: #FFFFFF;
      }
    }

    /*头像*/
    .headPortrait{
      width: 80px;
      height: 80px;
      background-color: antiquewhite;
      border-radius: 50%;
      vertical-align: middle;
      margin-right: 14px;
      color: #2E2E2E;
    }
    /*头像信息*/
    .people-info{
      vertical-align: middle;
      height:51px;
      .people-name{
        line-height: 25px;
        font-size: 18px;
        color: #2E2E2E;
        color: #2E2E2E;
        margin-bottom: 6px;
      }
      .people-num{
        line-height: 20px;
        font-size: 14px;
        color: #000000;
        font-family: PingFangSC-Regular;
      }
    }
    /*按钮*/
    .flollowBtn{
      vertical-align: middle;
      float: right;
      margin-top: 39px;
      width: 140px;
      height: 45px;
      line-height: 45px;
      border: 2px solid #317260;
      color: #317260;
    }
  }
  /*脚部*/
  .footer{
    margin-bottom: 38px;
    background: #F8F9FD;
    div{
      display: inline-block;
      font-family: PingFangSC-Regular;
      line-height: 78px;
      font-size: 15px;
      color: #2E2E2E;
      .footer-title{letter-spacing: 0.6px;}
      .footer-num{
        width: 50px;
        line-height: 38px;
        background-color: #ffffff;
        letter-spacing: 0.3px;
        text-align: center;
        margin-left: 7px;
      }
    }
    .footerOne{margin: 0 43px 0 199px;}

  }
</style>
